  <template>
    <div>
        <el-button
            type="primary"
            size="small"
            icon="el-icon-circle-plus-outline"
            @click="showPrincipal()"
        >新增负责人</el-button>
        <el-table
            ref="table"
            :data="tableData"
            v-loading="loading"
            border
            :header-cell-style="getRowClass"
        >
            <el-table-column prop="countryName" :label="$t('m.label.country')"></el-table-column>
            <el-table-column prop="productModelNumber" :label="$t('m.label.productModelNumber')"></el-table-column>
            <el-table-column prop="asin" label="ASIN"></el-table-column>
            <el-table-column prop="productCategory" :label="$t('m.label.productCategory')"></el-table-column>
            <el-table-column prop="businessUnit" :label="$t('m.label.ownBu')"></el-table-column>
            <el-table-column prop="departmentName" :label="$t('m.label.operationalGroup')"></el-table-column>
            <el-table-column prop="userName" :label="$t('m.label.deptUser')"></el-table-column>
            <el-table-column prop="record" :label="$t('m.label.recorder')"></el-table-column>
            <el-table-column prop="uTime" :label="$t('m.label.updateTime')">
                <template slot-scope="scope">{{scope.row.uTime | formatDate}}</template>
            </el-table-column>
            <el-table-column prop="remark" :label="$t('m.label.remarks')"></el-table-column>
            <el-table-column :label="$t('m.label.operating')" width="80px">
                <template slot-scope="scope">
                    <el-button size="mini" @click="showPrincipal(scope.row)">{{$t('m.button.edit')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <scrollTable ref="scrollTable"></scrollTable>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="500px">
            <el-form ref="form" :model="formData" :rules="rules" label-width="90px">
                <el-form-item :label="$t('m.label.ownBu')+':'">{{basicInfo.businessUnit}}</el-form-item>
                <el-form-item
                    :label="$t('m.label.productCategory')+':'"
                >{{basicInfo.productCategory}}</el-form-item>
                <el-form-item
                    :label="$t('m.label.productModelNumber')+':'"
                >{{basicInfo.productModelNumber}}</el-form-item>
                <el-form-item prop="countryId" :label="$t('m.label.country')+':'">
                    <el-select
                        :placeholder="$t('m.placeholder.selectCountry')"
                        v-model="formData.countryId"
                        @change="chooseCountry"
                        size="small"
                    >
                        <el-option
                            v-for="item in Country"
                            :label="item.countryName"
                            :key="item.countryId"
                            :value="item.countryId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="asin" :label="$t('m.label.ASIN')+':'">
                    <el-select
                        :placeholder="$t('m.placeholder.selectASIN')"
                        v-model="formData.asin"
                        allow-create
                        filterable
                        size="small"
                    >
                        <el-option v-for="item in asin" :key="item.key" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="operationGroup" :label="$t('m.label.operationalGroup')+':'">
                    <span v-if="dialogTitle === '编辑负责人'">{{formData.departmentName}}</span>
                    <el-select
                        v-if="dialogTitle !== '编辑负责人'"
                        v-model="formData.operationGroup"
                        allow-create
                        filterable
                        size="small"
                    >
                        <el-option
                            v-for="item in operationGroup"
                            :key="item.id"
                            :value="item.id"
                            :label="item.departmentName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="userId" :label="$t('m.label.deptUser')+':'">
                    <span v-if="dialogTitle === '编辑负责人'">{{formData.userName}}</span>
                    <el-select
                        v-if="dialogTitle !== '编辑负责人'"
                        v-model="formData.userId"
                        allow-create
                        filterable
                        size="small"
                        @focus="getUserCharge"
                    >
                        <el-option
                            v-for="item in userCharge"
                            :key="item.userId"
                            :value="item.userId"
                            :label="item.userName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="remark" :label="$t('m.label.remarks')+':'">
                    <el-input
                        type="textarea"
                        size="small"
                        v-model="formData.remark"
                        :autosize="{ minRows: 2, maxRows: 4}"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                <el-button
                    type="primary"
                    @click="onSubmit('form')"
                    size="small"
                    :disabled="loadingSubmit"
                    :icon="loadingSubmit?'el-icon-loading':'el-icon-circle-plus-outline'"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

  <script>
import scrollTable from "components/scroll/scroll-table.vue";
import { formatDate } from "assets/js/date";
const ERR_OK = 200;
export default {
    props: {
        basicInfo: Object
    },
    data() {
        return {
            tableData: [],
            loading: false,
            loadingSubmit: false,
            formData: {
                productId: this.basicInfo.productId
            },
            dialogFormVisible: false,
            Country: [],
            asin: [],
            dialogTitle: "",
            rules: {
                countryId: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectCountry"),
                        trigger: "change"
                    }
                ],
                asin: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectASIN"),
                        trigger: "change"
                    }
                ]
            },
            operationGroup: [],
            userCharge: []
        };
    },
    filters: {
        formatDate(date) {
            let dates = new Date(date);
            return formatDate(dates, "yyyy-MM-dd");
        }
    },
    created() {
        this.getData();
        this.getCountry();
        this.getOperationGroup();
    },
    methods: {
        //获取列表
        getData() {
            this.loading = true;
            this.$ajax
                .get(
                    this.GLOBAL.productService +
                        "/findProductCharge/findProductUserChargeByProductId/" +
                        this.basicInfo.productId
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.tableData = res.data.data;
                    }
                    this.loading = false;
                    this.$refs.scrollTable.scrollShow(this.$refs.table);
                });
        },
        showPrincipal(val) {
            this.dialogFormVisible = true;
            console.log(val)
            if (val) {
                this.formData = JSON.parse(JSON.stringify(val));
                this.dialogTitle = "编辑负责人";
            } else {
                this.dialogTitle = "新增负责人";
                this.$refs["form"].resetFields();
            }
        },
        //获取国家
        getCountry() {
            this.$ajax
                .get(
                    this.GLOBAL.productService +
                        "/findProductCharge/findCountry"
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.Country = res.data.data;
                    }
                });
        },
        //获取ASIN
        chooseCountry(countrId) {
            this.asin = [];
            this.$ajax
                .post(
                    this.GLOBAL.productService +
                        "/findProductCharge/findProductAsinByProductIdAndCountryId?countryId=" +
                        countrId +
                        "&productId=" +
                        this.basicInfo.productId
                )
                .then(res => {
                    if (res.data.code) {
                        this.asin = res.data.data;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
        },
        //获取运营组
        getOperationGroup() {
            this.$ajax
                .get(
                    this.GLOBAL.productService +
                        "/productSubscription/findOperationGroupByBuId/" +
                        this.basicInfo.businessUnitId
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.operationGroup = res.data.data;
                    }
                });
        },
        //获取负责人
        getUserCharge() {
            if (this.formData.operationGroup) {
                this.$ajax
                    .get(
                        this.GLOBAL.productService +
                            "/productSubscription/findUserChargeByDeptId/" +
                            this.formData.operationGroup
                    )
                    .then(res => {
                        if (res.data.code === ERR_OK) {
                            this.userCharge = res.data.data;
                        }
                    });
            } else {
                this.$message.warning("请选择运营组别");
            }
        },
        //  提交
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.loadingSubmit = true;
                    if (this.dialogTitle === "新增负责人") {
                        this.addPrincipal();
                    } else {
                        this.editPrincipal();
                    }
                } else {
                    return false;
                }
            });
        },
        //添加
        addPrincipal() {
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.productService +
                    "/findProductCharge/addProductUserCharger",
                data: this.formData
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$message.success("新增成功");
                    this.getData();
                    this.dialogFormVisible = false;
                } else {
                    this.$message.error(res.data.msg);
                }
                this.loadingSubmit = false;
            });
        },
        // 编辑
        editPrincipal() {
            this.formData.oldCountryId = this.formData.countryId;
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.productService +
                    "/findProductCharge/updateProductUserCharger",
                data: this.formData
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$message.success("保存成功");
                    this.getData();
                    this.dialogFormVisible = false;
                } else {
                    this.$message.error(res.data.msg);
                }
                this.loadingSubmit = false;
            });
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    },
    components: {
        scrollTable
    }
};
</script>
<style lang="stylus" scoped>
.el-table {
    margin-top: 10px;
}

.el-form-item {
    margin-bottom: 15px;
}
</style>